<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>
</head>
<body>
    <header class="header searchHeader">
         <div class="headerLeft" onclick="historyBack()"></div>
            <div class="pageTitle">
                <div class="searchBtn"></div>
                <div class="sBoxInput">
                    <input placeholder="请输入关键字搜索！" />
                </div>
            </div>
         <div class="headerRight c-333" >搜索</div>
    </header>
    <section class="searchPage HTML_BOX">
        <div class="bg-eee" style="border-bottom:.2rem solid #EEE ; "></div>
        <div class="searchBox1">
            热门搜索
        </div>
        <ul class="rankList">
            <li>苹果</li>
            <li>猪肉</li>
            <li>纸品湿巾</li>
            <li>电力砂锅</li>
            <li>厨房收纳</li>
            <li>车厘子</li>
            <li>白菜</li>
        </ul>
        <div class="searchBox2 f_c">
            <div class="refresh"><i></i>换一批</div>
        </div>
        <div class="bg-eee" style="border-bottom:.2rem solid #EEE ; "></div>
        <div class="searchBox2 displayFlex">
            <div>最近搜索</div>
            <div class="delete"><i></i>清除</div>
        </div>
        <ul class="searchList plr">
            
        </ul>
    </section>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var slist = $api.getStorage('slist') || [];
    $(".delete").click(function(){
        deleteElement($(".searchList li"),2);
        $api.setStorage('slist',[]);
    })
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        ifCnAndEn();
        getHot();
        getsearchList();
        

    };
    $(".headerRight").click(function(){
        var keys = $(".sBoxInput input").val();
        if(keys==""){
            var msg = "请输入关键字搜索！";
            if(cnen==2){
                msg="Please enter keyword search!";
            }
            pop.notice(msg);
            return;
        }
        addseach(keys);
        console.log(slist);
        openWin('classify_search','classify_search.html',{keys:keys});
    })
    $(".refresh").click(function(){
        index = count * 7;
        count++;
        getHot();
    })
    $('.sBoxInput input').bind('keypress',function(event){
        if(event.keyCode == "13")    
        {
            var keys = $(".sBoxInput input").val();
            if(keys==""){
                var msg = "请输入关键字搜索！";
                if(cnen==2){
                    msg="Please enter keyword search!";
                }
                pop.notice(msg);
                return;
            }
            
            addseach(keys);
            console.log(slist);
            openWin('classify_search','classify_search.html',{keys:keys});
        }
    })
    function gokeys(keys){
        openWin('classify_search','classify_search.html',{keys:keys});
    }
    var index = 0;
    var count =1;
    var isready = true;
    function getHot(){
        console.log(index);
        pop.loading();
        getAjax(Interface.hot_search,{first:index},function(res){
            
            console.log(JSON.stringify(res));
            var list  = res.data;
            var html = '';
            $.each(list,function(i,item){
                html +='<li onclick="gokeys(\''+item.keywords+'\')">'+item.keywords+'</li>'
            })
            pop.loading();
            if(isready){
                isready =false;
                setTimeout(function(){
                    pop.close();
                    $(".sBoxInput input").focus();
                },500);
            }else{
                pop.close();
            }
            $(".rankList").html(html);
        },function(res,err){})
    }
    function getsearchList(){
        $.each(slist,function(i,item){
            $(".searchList").append('<li onclick="gokeys(\''+item+'\')"><i></i><span>'+item+'</span></li>');
        })
        
    }
    
    function addseach(val){
        var result = true;
        $.each(slist,function(i,item){
           if(val == item){
                result = false;
           }
        })
        if(result){
            slist.push(val);
            $api.setStorage('slist',slist);
            $(".searchList").append('<li onclick="gokeys(\''+val+'\')"><i></i><span>'+val+'</span></li>');
        }
    }
</script>
<script type="text/javascript">
    function ifCnAndEn(){
        if(cnen==2){
            $(".pageTitle input").attr("placeholder",'What are you looking for?');
            $(".headerRight").html("Search");
            $(".headerRight").css("font-size","0.28rem");
            $(".headerRight").css("width","1.2rem");
            $(".searchBox1").html("Hot Search");
            $(".refresh").html("<i></i>See More");
            $(".searchBox2").eq(1).find("div").eq(0).html("Recent Search");
            $(".searchBox2 .delete").html("<i></i>Delete");
        }
    }
</script>
</html>